window.addEventListener("load", function () {
	// 导航栏移入效果
	$("header ul li").forEach(function (v) {
		v.addEventListener("mouseover", function () {
			this.className = "active";
		});
		v.addEventListener("mouseout", function () {
			this.className = "";
		});
	});
	// 模拟服务器上的传递过来的数据
	let apiTypeData = [
		{ name: "全部", keyword: "身份证实名", isnew: false },
		{ name: "生活服务", keyword: "银行卡", isnew: false },
		{ name: "金融科技", keyword: "短信", isnew: false },
		{ name: "交通地理", keyword: "天气", isnew: false },
		{ name: "充值缴费", keyword: "短信", isnew: false },
		{ name: "数据智能", keyword: "手机归属地", isnew: false },
		{ name: "企业工商", keyword: "IP", isnew: false },
		{ name: "应用开发", keyword: "手机归属地", isnew: false },
		{ name: "电子商务", keyword: "IP", isnew: false },
		{ name: "吃喝玩乐", keyword: "视频", isnew: false },
		{ name: "文娱视频", keyword: "视频", isnew: false },
		{ name: "免费接口大全", keyword: "短信", isnew: true },
		{ name: "短信", keyword: "身份证实名", isnew: false },
		{ name: "汽车", keyword: "银行卡", isnew: false },
		{ name: "核验", keyword: "银行卡", isnew: false },
		{ name: "最新发布", keyword: "银行卡", isnew: true },
		{ name: "API私有化部署", keyword: "身份证实名", isnew: true },
	];
	// 功能一给ul赋值
	let html = "";
	apiTypeData.forEach(function (v, i) {
		if (i === 0) {
			html += `<li class="active" title ='${v.keyword}'>${v.name}</li>`;
		} else if (v.isnew) {
			html += `<li class="fw-bold" title ='${v.keyword}'>${v.name}</li>`;
		} else {
			html += `<li title ='${v.keyword}'>${v.name}</li>`;
		}
	});
	$(".one div ul").innerHTML = html;
	// 给li点击效果
	$("main .one li").forEach(function (v) {
		v.addEventListener("click", function () {
			$("main .one li").forEach(function (item) {
				item.classList.remove("active");
			});
			v.classList.add("active");
			$(".one strong").textContent = this.textContent;
			$(".one input").value = this.title;
		});
	});

	const listDataArr = [
		//第一行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证1",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{
			img: "API_03.jpg",
			name: "天气预报1",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验1",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务1",
			price: "￥0.0400/次",
			isSpecial: true,
		},

		//第二行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南2",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证2",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验2",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务2",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第三行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南3",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证3",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验3",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务3",
			price: "￥0.0400/次",
			isSpecial: true,
		},
		//第四行
		{
			img: "API_01.jpg",
			name: "2021出行防疫政策指南4",
			price: "免费",
			isSpecial: false,
		},
		{
			img: "API_02.jpg",
			name: "身份证实名认证4",
			price: "￥0.2000/次",
			isSpecial: true,
		},
		{ img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
		{
			img: "API_04.jpg",
			name: "银行卡四元素校验4",
			price: "￥0.3360/次",
			isSpecial: true,
		},
		{
			img: "API_05.jpg",
			name: "短信API服务4",
			price: "￥0.0400/次",
			isSpecial: true,
		},
	];
	let cardshtml = "";
	// listDataArr.forEach(function (v) {
	// 	cardshtml += `
	// <li>
	// 	<img src='../imgs/${v.img}' alt="" />
	// 	<p>${v.name}</p>
	// 	<p class="${v.isSpecial ? "fc-red" : "fc-green"}">${v.price}</p>
	// 	${v.isSpecial ? `<span>企业认证</span>` : ``}
	// 	<a href="#" >申请数据</a>
	// </li>
	// `;
	// });
	// 分页效果
	$("#apiCardsList").innerHTML = cardshtml;

	$("#pagination ul li").forEach(function (v) {
		v.addEventListener("click", function () {
			$("#pagination ul li").forEach(function (itme) {
				itme.classList.remove("active");
			});
			v.classList.add("active");
			render(Number(v.textContent), 5, listDataArr);
		});
	});
	// 分页函数封装
	function render(pagination, pagesize, arr) {
		let startIndex = (pagination - 1) * pagesize;
		const result = arr.slice(startIndex, startIndex + pagesize);
		let cardshtml = "";
		result.forEach(function (v) {
			cardshtml += `
	<li>
		<img src='../imgs/${v.img}' alt="" />
		<p>${v.name}</p>
		<p class="${v.isSpecial ? "fc-red" : "fc-green"}">${v.price}</p>
		${v.isSpecial ? `<span>企业认证</span>` : ``}
		<a href="#" >申请数据</a>
	</li>
	`;
		});
		$("#apiCardsList").innerHTML = cardshtml;
	}
	render(1, 5, listDataArr);
	// 登陆蒙层
	$("#apiCardsList").addEventListener("click", function (e) {
		if (e.target.localName === "a") {
			$("#mask").style.display = "block";
			document.body.style.overflow = "hidden";
		}
	});
	// 取消登录蒙层
	$("#mask").addEventListener("click", function () {
		$("#mask").style.display = "none";
		document.body.style.overflow = "auto";
	});
	$("#loginModal").addEventListener("click", function (e) {
		e.stopPropagation();
	});
	// 登陆切换
	$("#loginModal form")[0].style.display = "block";
	$("#loginModal a").forEach(function (v, i) {
		v.addEventListener("click", function () {
			$("#loginModal a").forEach(function (item) {
				item.classList.remove("active");
			});
			v.classList.add("active");

			$("#loginModal form").forEach(function (each) {
				each.style.display = "none";
			});
			$("#loginModal form")[i].style.display = "block";
		});
	});
});
